<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WFS</title>
    <script type="text/javascript" include="bootstrap-css,jqury" src="../js/include-web.js"></script>
    <script src="../../dist/openlayers/include-openlayers.js"></script>
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
    <div id="map" style="width: 100%;height:100%"></div>
    <script>
        var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
        });
        var vectorSource = new ol.source.Vector();
        var vecLayer = new ol.layer.Vector({
            source: vectorSource,
            style: function (feature, resolution) {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 5
                    })
                });
            }
        });
        var wfsVectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON({
                    geometryName: 'geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
                }),
                url: 'http://localhost:8090/iserver/services/data-China4002/wfs100/utf-8?service=WFS&version=1.0.0&request=GetFeature&typeName=China%China_Province_pg&outputFormat=application%2Fjson'
            }),
            style: function (feature, resolution) {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        width: 5
                    })
                });
            }
        });
        

        var map = new ol.Map({
            layers: [raster,  vecLayer, wfsVectorLayer],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                projection: 'EPSG:4326',
                zoom: 2
            })
        });

        // 创建一个请求
        var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:4326',//坐标系
            featureNS: 'http://www.supermap.com/China',
            featurePrefix: 'China',
            featureType: ['China_Province_pg'],
            maxFeatures: 50,
            outputFormat: 'application/json',
            
        });
        // 发送请求
        fetch('http://localhost:8090/iserver/services/data-China4002/wfs100/utf-8', {
            method: 'POST',
            body: new XMLSerializer().serializeToString(featureRequest)
        }).then(function (response) {
            return response.json();
        }).then(function (json) {
            var features = new ol.format.GeoJSON().readFeatures(json);
            vectorSource.addFeatures(features);
        });
    </script>

    </script>
</body>

</html>